<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useWindowSize } from '@vueuse/core'
import * as echarts from 'echarts/core'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
])

const { width } = useWindowSize()
const w = (num: number) => (num / 375) * width.value

const echart = ref()
// 测试数据
const data = [
  { value: 120, name: '面试' },
  { value: 60, name: '后端' },
  { value: 100, name: '前端' },
  { value: 210, name: '区块链' },
  { value: 100, name: '数据库' },
  { value: 280, name: 'CSS' },
  { value: 300, name: 'C++' },
  { value: 180, name: 'Html' }
]

const initCharts = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(echart.value)

  // 图表自适应
  window.addEventListener('resize', () => {
    myChart.resize()
  })
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '点击查看\n数据',
      top: '42%',
      x: 'center',
      y: 'center',
      textStyle: {
        color: '#1D2129',
        fontSize: w(16),
        align: 'center',
        fontWeight: 400,
        lineHeight: w(24)
      }
    },
    tooltip: {
      trigger: 'item',
      show: false
    },
    legend: {
      icon: 'circle',
      padding: 0,
      bottom: 0,
      width: w(375),
      left: 'left',
      itemGap: 0,
      itemWidth: w(8),
      itemHeight: w(8),
      formatter: ['{a|{name}}'].join('\n'),
      textStyle: {
        padding: [0, 0, 0, w(8)],
        rich: {
          a: {
            width: w(60),
            height: w(36),
            color: '#1D2129',
            fontSize: w(16),
            fontWeight: 400,
            lineHeight: w(24)
          }
        }
      }
    },
    series: [
      {
        top: '-5%',
        type: 'pie',
        radius: ['30%', '61.3%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'inside'
        },
        emphasis: {
          label: {
            show: true,
            color: '#fff',
            fontSize: w(16),
            fontWeight: 400,
            lineHeight: w(24),
            formatter: '{b}\n{c|{c}}',
            textStyle: {
              rich: {
                c: {
                  fontWeight: 600,
                  fontSize: w(16),
                  lineHeight: w(24)
                }
              }
            }
          }
        },
        labelLine: {
          show: false
        },
        data: data,
        clockwise: false
      }
    ],
    color: [
      '#FFB484',
      '#F3D24E',
      '#28D6A6',
      '#2CD3D3',
      '#00C3FF',
      '#9765FF',
      '#DA15FC',
      '#FF6A75'
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

onMounted(() => {
  initCharts()
})
</script>

<template>
  <div class="hot-page">
    <ic-nav-bar title="热门技术"></ic-nav-bar>
    <div ref="echart" class="echart"></div>
  </div>
</template>

<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 424px;
  padding: 0 31px;
}
</style>
